<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="billiards-info-box flexWrapNo">
					<view class="billiards-img">
						<image src="https://static.mo-yu.vip/uploads/20240920/f213f31d82c93f075b66e9b2a64b58bd.png"></image>
					</view>
					<view class="info-right">
						<view class="billiards-info">
							<view class="billiards-name">{{tableInfo.equipment_name}}</view>
							<view class="shop-name">{{tableInfo.shop_name}}</view>
							<view class="status" :class="{busy:tableInfo.status==2,repair:tableInfo.status==3}">{{tableInfo.status==2?'使用中':tableInfo.status==3?'维护':'空闲'}}</view>
							<view class="order-time">{{tableInfo.status==2?'可预约：'+tableInfo.yuyue:''}}</view>
						</view>
					</view>
				</view>
				<view class="padd-box">
					<block>
						<view class="time-box">
							<view class="flexWrap">
								<view class="meal-info">
									<view class="meal-title">先打后付</view>
									<view class="price-text">价格：{{tableInfo.price||0}}元/小时</view>
								</view>
							</view>
							<view class="lattice-box flexWrapNo">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
									<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="lattice-box flexWrapNo" v-if="allHour>23">
								<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
									<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}"></view>
									<text class="lattice-text">{{item.time}}</text>
								</view>
							</view>
							<view class="select-time">当前时间：{{currmentDate}} {{currmentTime}}</view>
						</view>
					</block>
				</view>
				<view class="btn-box flexWrap">
					<view class="determine-btn" :class="{weihu:tableInfo.status==3}" @tap="goConfirm()">{{tableInfo.status==3?"维护中暂停使用":"确定下单"}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currmentIndex:0,
				currmentDate:"",
				currentHour:0,
				currmentTime:"",
				nextTime:"",
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				nextIndex:0,
				dateList:[],
				status:1,
				equipment_id:"",
				tableInfo:{},
				hoursList:[],
				store_id:"",
				allHour:0,
				type:1,
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		computed:{
			totalPrice(){
				let totalPrice=0;
				totalPrice+=Number(this.totalHour*this.tableInfo.price)
				return totalPrice.toFixed(2);
			},
		},
		onLoad(ops) {
			this.equipment_id=ops.equipment_id
			this.store_id=ops.store_id||uni.getStorageSync('store_id')
			this.tableDetails();
		},
		methods: {
			// 获取当前日期
			getDate(type,num){
				num=num||0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year=time.getFullYear()
				let month=time.getMonth()+1
				let day=time.getDate()
				let fullDate=""
				if(type==0){
					fullDate=year+'-'+month+'-'+day
				}else{
					fullDate=month+'月'+day+'日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate,num){
				num=num||0
				var time = new Date();
				var time1 =currmentDate?Date.parse(currmentDate.replace(/-/g, '/')):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取各个参数
			getHoursData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				this.currmentTime=this.getTimeString()//获取当前时间
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
				this.currmentDate=this.getDate(1,this.dateIndex);//获取当前日期
			},
			// 桌球详情
			tableDetails(){
				this.$request.post(this.$api.tableDetails, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:this.equipment_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.tableInfo=data
						this.getHoursData();
						let key=Object.keys(this.tableInfo.t_date)
						this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
					}
				})
			},
			// 提交参数验证
			goConfirm(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				if(this.tableInfo.status==3){
					this.$tools.hideLoading()
					this.$tools.showToast('对不起，请您选择其他桌，本桌真在维护或者使用中')
					return;
				}
				this.$request.post(this.$api.confirmOrder, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id:this.equipment_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.goPage('/pages/manage/orderSuccess?order_id='+data.order_id)
					}else{
						uni.hideToast()
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function(res) {
								
							}
						});
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#040336;
	}
	.padd-box{
		padding: 0 36upx;
	}
	.billiards-info-box{
		align-items: flex-end;
		.billiards-img{
			width: 400upx;
			height: 400upx;
		}
		.info-right{
			margin-left: 20upx;
			.billiards-info{
				.billiards-name{
					font-size: 48upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 66upx;
					color: #FFFFFF;
				}
				.shop-name{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #999999;
					margin-top: 10upx;
				}
				.status{
					width: 108upx;
					height: 44upx;
					line-height: 44upx;
					text-align: center;
					background: #2CA522;
					border-radius: 22upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 18upx;
				}
				.busy{
					background: #FFB726;
				}
				.repair{
					background:#969696;
				}
				.order-time{
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					height: 34upx;
					color: #FFB726;
					margin-top: 24upx;
				}
			}
			.verification-box{
				width: 260rpx;
				height: 120rpx;
			}
		}
	}
	.time-box{
		margin-top: 30upx;
		.meal-info{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #999999;
			.meal-title{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50upx;
				color: #FFFFFF;
				margin-bottom: 12upx;
			}
			.set-time{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #FFB726;
				margin-left: 28upx;
			}
		}
		.operation-box{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #FFFFFF;
			.reduce-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#1D1C5C;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			.operation-num{
				margin: 0 30upx;
			}
			.increase-btn{
				width: 80upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#26BCFD;
				border-radius: 16upx;
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.lattice-box{
			margin-top: 34upx;
			.lattice-item{
				margin-right: 6upx;
				.lattice{
					width: 24upx;
					height: 48upx;
					background:#55525D;
					border-radius: 4upx;
				}
				.blue{
					background: #26BCFD !important;
				}
				.white{
					background:#FFFFFF;
				}
				.red{
					background:#FF4726!important;
				}
				.lattice-text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28upx;
					color: #55525D;
				}
			}
		}
		.date-box{
			margin-top: 30upx;
			justify-content: center;
			.date-item{
				width: 124upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background:#1D1C5C;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-right: 24upx;
				position: relative;
				.endlable{
					position: absolute;
					top: 0;
					right: 0;
					width: 80upx;
					height: 36upx;
					line-height: 36upx;
					text-align: center;
					background: #55525D;
					border-radius: 0px 16upx 0px 16upx;
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.orderlable{
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 36upx;
					line-height: 36upx;
					text-align: center;
					background: #55525D;
					border-radius: 0px 16upx 0px 16upx;
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.data-active{
				background-color: #26BCFD;
			}
		}
		.select-time{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #FFFFFF;
			margin-top: 36upx;
		}
	}
	
	.btn-box{
		background-color: #1D1C5C;
		padding: 18upx 32upx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.determine-btn{
			width: 286upx;
			height: 80upx;
			text-align: center;
			background: #26BCFD;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 80upx;
			color: #FFFFFF;
			margin: auto;
		}
		.weihu{
			background-color: #606061;
		}
	}
</style>
